<template>
  <div class="solution-way">
    <div class="solution-way-item">
      <div class="series">1</div>
      <div class="text-block">
        <div class="title">协商</div>
        <div class="desc">双方直接沟通解决</div>
      </div>
    </div>
    <div class="solution-way-item">
      <div class="series">2</div>
      <div class="text-block">
        <div class="title">调解</div>
        <div class="desc">通过居委会、第三方机构介入</div>
      </div>
    </div>
    <div class="solution-way-item">
      <div class="series">3</div>
      <div class="text-block">
        <div class="title">仲裁</div>
        <div class="desc">依协议提交仲裁机构</div>
      </div>
    </div>
    <div class="solution-way-item">
      <div class="series">4</div>
      <div class="text-block">
        <div class="title">诉讼</div>
        <div class="desc">向法院起诉</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SolutionWay'
}
</script>
<style scoped lang="scss">
.solution-way{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,198,255,.3);
  }
  &::-webkit-scrollbar-track{
    border-radius: 3px;
    background: rgba(0,24,48,.3);
  }
  .solution-way-item{
    width: 100%;
    height: 70px;
    border-radius: 5px;
    border: 1px solid #32B4FF;
    padding: 0 20px;
    display: flex;
    align-items: center;
    background: #06213B;
    margin-bottom: 20px;
    .series{
      width: 40px;
      height: 40px;
      color: #fff;
      font-weight: bold;
      background: linear-gradient(to right, #1C86FE, #22E0E8);
      margin-right: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
    .text-block{
      flex-grow: 1;
      font-size: 14px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .title{
        font-weight: bold;
        margin-bottom: 8px;
      }
    }
  }
}
</style>
